<template>
	<!-- 底部的导航栏 -->
	<div class="bottom-nav">
		<el-row>
			<el-col :span="5">
				<div class="img xianyu">
					<span>闲鱼</span>
				</div>
			</el-col>
			<el-col :span="5">
				<div class="img yutang">
					<span>鱼塘</span>
				</div>
			</el-col>
			<el-col :span="4">
				<div class=" fabu">
					<span>发布</span>
				</div>
			</el-col>
			<el-col :span="5">
				<div class="img msg">
					<span>消息</span>
				</div>
			</el-col>
			<el-col :span="5">
				<router-link to="/user/center">
					<div class="img wode">
						<span>我的</span>
					</div>
				</router-link>
			</el-col>
		</el-row>

	</div>

</template>


<script>
	
	export default {
		name:"bottomnav"
	}

</script>


<style scoped="">
	
	a{
		color: #000;
	}

	.bottom-nav{
		position: fixed;
		bottom: 0;
		left: 0;
		width:100%;
		border-top:1px solid #ccc;
	}

	.img{
		width: 30px;
		height: 30px;
		margin-top:5px;
		margin-bottom: 25px;
		margin-left:auto;
		margin-right: auto;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.img span{

		display: inline-block;
		vertical-align: bottom;
		margin-top:35px;
		font-size: 12px;
	}

	.xianyu{
		background-image: url('../assets/images/ic_tabbar_home_nor.png');

	}

	.fabu{
		background-image: url('../assets/images/comui_tab_post.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 60px;
		margin-left:auto;
		margin-right:auto;
		height: 60px;
		margin-top: -25px;
	}

	.fabu span{
		display: inline-block;
		vertical-align: bottom;
		margin-top:65px;
		font-size: 12px;
	}

	.yutang{
		background-image: url('../assets/images/ic_tabbar_group_nor.png');	
	}

	.msg{
		background-image: url('../assets/images/ic_tabbar_message_nor.png');
	}

	.wode{
		background-image: url('../assets/images/ic_tabbar_my_nor.png');
	}
	
	.el-col{
		height: 100%;
	}
</style>